DOM の章の確認問題を追加、内容のアップデート #725
Conversation
Deploying utcode-learn with
|
| Latest commit: |
7fa8024
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://25aa687d.utcode-learn.pages.dev |
| Branch Preview URL: | https://update-dom-description.utcode-learn.pages.dev |
| 下のような HTML が記述されています。 | ||
|
|
||
| ```html title="index.html" | ||
| <div>Good <strong id="greeting-type">morning</strong>!</div> |
There was a problem hiding this comment.
これ greeting-type で英語的に合ってるんでしょうか？
greeting-time とかの方が良さそうに見えます。
There was a problem hiding this comment.
https://learn.utcode.net/docs/trial-session/functions/#引数
に倣いましたが、確かにそうですね……
There was a problem hiding this comment.
greeting-typeだと有限のものの1つで、greeting-timeだと無限のもの(連続のもの)の1つという感覚を受けそうですね。
今回だとmorning、afternoon、eveningみたいな感じで有限なもののどれかということを表しているので、greetingTypeだと明確かなと思いました。
There was a problem hiding this comment.
そしたらとりあえずこのままにします。問題があれば後で両方変えましょう
| <div id="greeting"></div> | ||
| ``` | ||
|
|
||
| JavaScript を使って、太字で `Hello World!` と表示されるようにしてください。 |
There was a problem hiding this comment.
｢太字で｣だけだと style を書き換えるように聞こえるので、ヒントで説明を加えると良さそうです 👀
There was a problem hiding this comment.
まあ strong を使いましょうって普通に言っちゃいますか。
naka-12
force-pushed
the
update-dom-description
branch
from
25993d9 to
5b75848
Compare
| @@ -62,8 +119,8 @@ element.style.backgroundColor = "red"; | |||
| 中身のない空の要素が作成されるので、`textContent` を `おやつ` に設定してみましょう。 | |||
|
|
|||
| ```js title="script.js" | |||
| const newItem = document.createElement("li"); | |||
| newItem.textContent = "おやつ"; | |||
| const snackItem = document.createElement("li"); | |||
There was a problem hiding this comment.
snackElementならHTML要素だという意味がelementに込められるからまだありだとは思うけど、snackItemだとitemとつけても情報量がそこまでは変わらない気がする。ある程度の効果はわからないでもないけど。
textContentの操作、styleの操作、要素の作成と追加の 3 ステップにそれぞれ確認問題を追加しました。5d40b1cscript要素はbody要素の末尾に置かなければならない旨を明示しました。これらは「HTML」「JavaScript」の章でそれぞれ触れてはいるものの、それらの章の中ではほぼ問題にならないため、「DOM」で初めて問題に直面する人が多く戸惑いの原因になっているためです。elementからgreetingElementに修正しました。bc2fad5